<template>
	<view>
		<view class="black-list">
			加入黑名单
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="user-info">
			<view class="bag">
				<view class="item">
					<view class="img">
						<image class="img" src="@/static/area.png" mode=""></image>
					</view>
					<view class="info">
						<view class="nickname">
							用户名称
						</view>
						<view class="binfo">
							<view class="phone gray">
								手机号：176211111111
							</view>
							<view class="id gray">
								ID：12312312312
							</view>
						</view>
					</view>
					<view class="addTag">
						用户标签
						<u-icon name="arrow-down" size="24"></u-icon>
					</view>
				</view>
				<view class="consumption">
					<view class="citem" v-for="(item, index) in citemList" :key="index">
						<view class="cil">
							{{ item.label }}
						</view>
						<view class="cir">
							{{ item.value }}
						</view>
					</view>
					<view class="citem" style="align-items: flex-start;">
						<view class="cil">
							用户标签
						</view>
						<view class="tags">
							<view class="tl">
								<u-tag text="标签1" size="mini" border-color="#F3060D" color="#F3060D"
									bg-color="rgba(243, 6, 13, 0.2)" type="success" />
								<u-tag text="标签2" size="mini" border-color="#F3060D" color="#F3060D"
									bg-color="rgba(243, 6, 13, 0.2)" type="success" />
							</view>
							<view class="tr">
								<u-button size="mini" :custom-style="customStyleAdd">添加</u-button>
								<u-button size="mini" :custom-style="customStyleEdit">编辑</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="record">
				<view class="title">
					消费记录
				</view>
				<view class="table">
					<view class="titem theader">
						<view class="tname">
							商品名称
						</view>
						<view class="tnum">
							数量
						</view>
						<view class="ttime">
							时间
						</view>
						<view class="tmoney">
							金额
						</view>
					</view>
					<view class="titem tbody" v-for="(item, index) in 3" :key="index">
						<view class="tname">
							商品1
						</view>
						<view class="tnum">
							15
						</view>
						<view class="ttime">
							2024-10-15 12:00:00
						</view>
						<view class="tmoney">
							￥99
						</view>
					</view>
				</view>
			</view>
			<view class="record">
				<view class="title">
					搜索记录
				</view>
				<view class="table">
					<view class="search" v-for="(item, index) in 3" :key="index">
						<view class="tl">
							商品名称
						</view>
						<view class="tr">
							2024-10-15 12:00:00
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="addbox = true">
			发放优惠券
		</view>
		
		<u-popup v-model="addbox" mode="bottom">
			<view class="input-box">
				<view class="title">
					<view class="l" style="opacity: 0;">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
					<view class="c">
						选择优惠券
					</view>
					<view class="r" @click="addbox = false">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<scroll-view class="coupon-list" scroll-y >
					<view class="coupon" v-for="(item, index) in 10" :key="index">
						<view class="l">
							<view class="check">
								<u-checkbox size="30" v-model="checked" shape="circle" active-color="#F3060D"></u-checkbox>
							</view>
							<view class="img">
								<image class="img" src="@/static/swiper.png" mode="heightFix"></image>
							</view>
							<view class="info">
								<view class="topname">
									优惠券名称
								</view>
								<view class="bottommoney">
									满50减50
								</view>
							</view>
						</view>
						<view class="r">
							<u-button size="mini" :custom-style="submitStyle">满减</u-button>
						</view>
					</view>
				</scroll-view>
				<view class="btn">
					完成
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				submitStyle: {
					color: '#FFF',
					background: '#F3060D',
					width: '104rpx'
				},
				addbox: false,
				checked: false,
				customStyleAdd: {
					color: '#F3060D',
					marginLeft: '20rpx'
				},
				customStyleEdit: {
					color: '#F3060D',
					marginLeft: '20rpx',
					marginTop: '10rpx'
				},
				citemList: [{
						label: '首次消费时间：',
						value: '2024-04-15 12:00:00'
					},
					{
						label: '最近消费时间：',
						value: '2024-04-15 12:00:00'
					},
					{
						label: '消费次数：',
						value: '10次'
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.input-box {
		height: 623rpx;
		padding: 0 31rpx;
		.coupon-list {
			width: 100%;
			height: 360rpx;
			.coupon {
				width: 100%;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.l {
					display: flex;
					align-items: center;
					.info {
						margin-left: 30rpx;
						.topname {
							margin-bottom: 20rpx;
						}
						.bottommoney {
							color: rgb(107, 107, 107);
						}
					}
					.img {
						height: 130rpx;
						border-radius: 10rpx;
					}
				}
				.r {
					
				}
			}
		}
		.title {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.c {
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
	.btn {
		position: fixed;
		bottom: 46rpx;
		left: 37rpx;
		width: 678rpx;
		height: 88rpx;
		border-radius: 44.5rpx;
		background: linear-gradient(147.27deg, #F1714E 0%, #E93E30 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-weight: 32rpx;
		color: #FFF;
		z-index: 1;
	}

	.record {
		background-color: #FFF;
		border-radius: 10rpx;
		margin-top: 20rpx;

		.table {
			padding: 24rpx 35rpx;

			.search {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;
				color: #333333;
				font-weight: 500;
				font-size: 28rpx;
			}

			.search:last-child {
				margin-bottom: 0;
			}

			.theader {
				margin-bottom: 30rpx;
				color: #333333;
				font-weight: 500;
				font-size: 28rpx;
			}

			.tbody {
				margin-bottom: 30rpx;
				color: #333333;
				font-weight: 400;
				font-size: 28rpx;
			}

			.tbody:last-child {
				margin-bottom: 0;
			}

			.titem {
				display: flex;

				.tmoney {
					width: 10%;
				}

				.ttime {
					width: 50%;
				}

				.tnum {
					width: 15%;
				}

				.tname {
					width: 25%;
				}
			}
		}

		.title {
			padding: 24rpx 35rpx;
			border-bottom: 1rpx solid rgba(221, 221, 221, 0.5);
		}
	}

	.user-info {
		padding: 0 20rpx;

		.bag {
			padding: 30rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.consumption {
				.citem {
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tags {
						display: flex;
						align-items: flex-end;
						justify-content: flex-end;

						.tr {
							width: 100rpx;
						}

						::v-deep .u-tag {
							margin: 0 10rpx 10rpx 10rpx;
						}
					}

					.cil {
						font-weight: 500;
						font-size: 24rpx;
						color: #383838;
					}
				}
			}

			.item {
				display: flex;
				position: relative;

				.addTag {
					position: absolute;
					right: 0;
					top: 0rpx;
					width: 180rpx;
					// height: 50rpx;
					border: 1rpx solid #F3060D;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 15rpx 20rpx;
					border-radius: 10rpx;
					font-size: 24rpx;
					color: #F3060D;
				}

				.info {
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.id {
						margin-top: 8rpx;
					}

					.gray {
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}

					.nickname {
						font-weight: 700;
						font-size: 30rpx;
						color: #1E1E1E;
					}
				}

				.img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
			}

		}
	}

	.black-list {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20rpx 26rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}
</style>
<style>
	page {
		background-color: #F4F5F7;
		padding-bottom: 168rpx;
	}
</style>